import React from 'react';
import './css/index.less';
import Footer from './footer';
import {IndexImg}from '../../utils/basic';
import {Link} from 'react-router-dom';

class Index extends React.Component{
  state={
    img11:true,
    img22:false,
    img33:false,
    img44:false
  }
 
  changeimg=(imgss)=>{
    if(imgss===1){
      this.setState({
        img11:true,
        img22:false,
        img33:false,
        img44:false
      })

    }else if(imgss===2){
      this.setState({
        img11:false,
        img22:true,
        img33:false,
        img44:false
      })
      
    }else if(imgss===3){
      this.setState({
        img11:false,
        img22:false,
        img33:true,
        img44:false
      })
    }else if(imgss===4){
      this.setState({
        img11:false,
        img22:false,
        img33:false,
        img44:true
      })
    }

  }

    render(){
      return (
        <div className="logoutindex "> 
      
          <div  className="index-show teacherss  col-xs-12 banner-margin" style={{backgroundImage: `url(${IndexImg+"index-banner.png"})`,backgroundSize:"100% 100%"}}>
               <div className="teacherss-in  col-md-11 col-xs-12">
                 <div className="col-md-7 col-xs-12"> 
                    <div  className="show-font">
                      原滋原味美国小班
                      在线课堂
                    </div>
                  <Link  className="delunderline" to="/goodsList/">
                    <div  className="teacherss-intro">
                      购买课程
                    </div>
                  </Link>
                    
                
                 </div>
                 <div className="index-left col-md-5 col-xs-12" style={{padding:0}}> 
                   <img src={IndexImg+'pc-1-01@2x.png'} alt="shoffutu" /> 
                 </div>
                 
               </div>
            </div> 
          {/* 特色模块 */}

             <div  className="features  col-xs-12" style={{clear:"both"}}>
               <div className="features-in  col-md-11 col-xs-12">
                 <div className="col-md-4 col-xs-12"> 
                   <img className="features-head" src={IndexImg+'icon_home-1@2x.png'} alt="shoffutu" /> 
                   <div  className="features-font">严选美加外教</div>
                   <div  className="features-intro">
                    美国、加拿大、优选外教，
                    拥有TESOL、TEFL证书，北美小学在职教师，
                    高学历、热爱教育、熟悉中国孩子。
                  </div>
                
                 </div>
                 <div className="col-md-4 col-xs-12"> 
                   <img className="features-head" src={IndexImg+'icon_home-2@2x.png'} alt="shoffutu" /> 
                    <div  className="features-font midle-font">科学的课程体系</div>
                    <div  className="features-intro">
                    基于美国共同核心州立标准（CCSS）
                    研发的课程体系，在相应的级别覆盖了
                    欧洲共同语言参考标准（CEFR）。
                    </div>
                 </div>
                 <div className="col-md-4 col-xs-12"> 
                   <img className="features-head" src={IndexImg+'icon_home-3@2x.png'} alt="shoffutu" /> 
                    <div  className="features-font happylearn">快乐学英语</div>
                    <div  className="features-intro">
                    丰富的学习内容，互动式学习环境，
                    结交同龄的学习伙伴；
                    经验丰富的北美外教让英语学习变为习惯与享受
                    </div>
                 </div>
               </div>
            </div> 

           {/* 老师团队 */}

           <div  className="teacherss  col-xs-12">
               <div className="teacherss-in  col-md-11 col-xs-12">
                 <div className="col-md-6 col-xs-12"> 
                    <div  className="teacherss-head" > 教师团队</div>
                    <div  className="teacherss-font">
                      100% 美国、加拿大优选外教
                      拥有TESOL、TEFL证书，北美小学在职教师
                      高学历、热爱教育、熟悉中国孩子
                    </div>
                    <Link className="delunderline" to="/course/">  
                      <div  className="teacherss-intro">
                        了解更多
                      </div>
                    </Link >
                 </div>
                 <div className="col-md-6 col-xs-12"> 
                   <img src={IndexImg+'pic-@2x (1).png'} alt="shoffutu" /> 
                 </div>
               </div>
            </div> 
        
             {/* 老师和孩子们 */}

             <div  className="teach-student teacherss  col-xs-12">
               <div className="teacherss-in  col-md-11 col-xs-12">
                 <div className="teach-student-left col-md-4 col-xs-12"> 
                  <img src={IndexImg+'pic-teacher@2x.png'} alt="shoffutu" />
                 
                 </div>
                 <div className="teach-student-right col-md-7 col-xs-12"> 
                    <div  className="teach-student-head" > 老师和孩子们</div>
                    <img className="imgUp" src={require('../../images/index-img/pic-up@2x.png')} alt="shoffutu" />
                   {this.state.img11?
                    (<div className="changefont">
                      <div  className="teach-student-font">
                      Hello everyone, thank you for joining the class today. I hope you enjoyed it as much as I did. You did a very good job, moving, dancing, speaking, and answering the questions. 
                      Oliver your pronunciation is very good and you actively participated today.
                        <br/><br/>
                        你们好！感谢大家今天的参与！希望你们和我一样享受上课的时光。四位小朋友今天表现都非常优秀，你们和Ana老师一起互动，跳舞，回答问题。
                        Oliver，你的发音非常棒，老师感谢你积极参与课堂活动。
                      
                      </div>
                      <hr/>
                      <div  className="teach-student-intro">
                      Oliver的家长: <br/>
                      孩子非常喜欢Ana老师的课，Ana很漂亮，上课很有激情，带领小孩子们一起做很多有意思的互动练习，孩子们很开心！
                      </div>
                    </div>  
                    ):""}

                 {this.state.img22?
                    (<div className="changefont">
                      <div  className="teach-student-font">
                      Hello everyone, thank you for joining the class today. I hope you enjoyed it as much as I did. You did a very good job, moving, dancing, speaking, and answering the questions. 
                      Alex, nicely done - you seem motivated and ready to learn! 
                        <br/><br/>
                        你们好！感谢大家今天的参与！希望你们和我一样享受上课的时光。四位小朋友今天表现都非常优秀，你们和Ana老师一起互动，跳舞，回答问题。
                        Alex, 做得好，你能够主动并热爱学习！
                      
                      </div>
                      <hr/>
                      <div  className="teach-student-intro">
                      Alex的家长: <br/>

                      Ana老师很有亲和力。 我们家Alex刚开始很胆小，不敢上课，上过几次之后，就爱上了上课和Ana老师。天天问我下次什么时候上课。
                      
                      </div>
                    </div>  
                    ):""}

                    {this.state.img33?
                    (<div className="changefont">
                      <div  className="teach-student-font">
                      Hello everyone, thank you for joining the class today. I hope you enjoyed it as much as I did. You did a very good job, moving, dancing, speaking, and answering the questions. 
                      Tommy， you showed us energetic answers and great pronunciation.
                        <br/><br/>
                        你们好！感谢大家今天的参与！希望你们和我一样享受上课的时光。四位小朋友今天表现都非常优秀，你们和Ana老师一起互动，跳舞，回答问题。
                        Tommy，你也为我们展示了你的能量和出色的英文发音。
                      
                      </div>
                      <hr/>
                      <div  className="teach-student-intro">
                      Tommy的家长：<br/>
                      我和孩子都很喜欢Ana老师的发音，非常清晰。孩子听不懂的时候，Ana会重复好几次，降低语速帮助孩子理解。
                      </div>
                    </div>  
                    ):""}

                     {this.state.img44?
                    (<div className="changefont">
                      <div  className="teach-student-font">
                      Hello everyone, thank you for joining the class today. I hope you enjoyed it as much as I did. You did a very good job, moving, dancing, speaking, and answering the questions. 
                      Miya it was lovely to have you in the class, you seem to learn quickly.
                        <br/><br/>
                        你们好！感谢大家今天的参与！希望你们和我一样享受上课的时光。四位小朋友今天表现都非常优秀，你们和Ana老师一起互动，跳舞，回答问题。
                        Miya，老师很开心在课上看到你，你学得很快，进步神速。
                      
                      </div>
                      <hr/>
                      <div  className="teach-student-intro">
                      Miya的家长：<br/>
                      Ana老师很付责任，很有耐心。我们家零基础的宝贝，也能够通过外教的表情和肢体动作，理解和掌握上课内容，看得出来外教都有认真备课的
                      </div>
                    </div>  
                    ):""}

                    
                    <img className="imgdown" src={require('../../images/index-img/pic-dow1@2x.png')} alt="shoffutu" />
                    
                    <div  className="teach-student-url">
                      <ul  className="HeadPortrait">
                       <li onClick={()=>{this.changeimg(2)}}> {this.state.img22?<img src={IndexImg+'pic-2@2x.png'} alt="shoffutu" /> : <img src={IndexImg+'pic-22@2x.png'} alt="shoffutu" />}</li>
                       <li onClick={()=>{this.changeimg(3)}}> {this.state.img33?<img src={IndexImg+'pic-3@2x.png'} alt="shoffutu" /> :<img src={IndexImg+'pic-33@2x.png'} alt="shoffutu" />}</li>
                       <li onClick={()=>{this.changeimg(4)}}> {this.state.img44?<img src={IndexImg+'pic-4@2x.png'} alt="shoffutu" />: <img src={IndexImg+'pic-44@2x.png'} alt="shoffutu" />}</li>
                       <li onClick={()=>{this.changeimg(1)}}>   {this.state.img11?<img src={IndexImg+'pic-1@2x.png'}  alt="shoffutu" /> : <img src={IndexImg+'pic-11@2x.png'}  alt="shoffutu" /> }</li>
                      </ul>
                    </div>
                   
                 </div>
                 
               </div>
            </div> 

           {/* 课程体系 */}
           <div  className="class-system  col-xs-12">
               <div className="system-in  col-md-12 col-xs-12">
                 <div className="system-descr  col-md-12 col-xs-12"> 
                    <div  className="system-head" >课程体系</div>
                    <div  className="system-font">
                      基于美国共同核心州立标准（CCSS）研发。
                      课程在美国原版教材的基础上，
                      加入了公立体系新课标要求的语言技能，
                      确保学生不仅能够自信面对公立考试，
                      同时成功对接国际英语能力测评。
                    </div>
                 </div>
                 <div className="system-img  col-md-12 col-xs-12"> 
                   <img src={IndexImg+'pic-class@2x.png'} alt="shoffutu" /> 
                 </div>
                 
               </div>
            </div> 
            {/* 底部 */}
            <Footer/>

        </div> 
      );
    }
}
export default Index;